<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/address_add.css">
	<link rel="icon" href="./icon/title_vagetable.png">
	<title>添加地址页面</title>
	<script src="./js/axios.min.js"></script>
	<script src="./js/axios.config.js"></script>
</head>

<body>
	<header>
		<img class="arrow" src="./img/shippingAddress/back.png" onclick="window.history.back(-1)" alt="">
		<span class="name">添加地址</span>
	</header>
	<div class="infomation">
		<form action="">
			<div class="item">
				<label>
					<span class="title">收货人：</span>
					<input placeholder="请输入收货人姓名" pattern="/\w/" name="consignee" type="text">
				</label>
			</div>
			<div class="item">
				<label>
					<span class="title">手机号码：</span>
					<input placeholder="请输入收货人手机号码" type="text">
				</label>
			</div>
			<div class="item">
				<label>
					<span class="title">所在地区：</span>
					<select name="province_id"></select>
					<select name="city_id"></select>
					<select name="county_id"></select>
					<select name="town_id"></select>
				</label>
			</div>
			<div class="item">
				<label>
					<span class="title">详细地址：</span>
					<textarea name="" id="" cols="30" rows="10" placeholder="门牌、楼层等" ></textarea>
				</label>
			</div>
			<div class="item">
				<label>
					<span class="title">邮政编码：</span>
					<input placeholder="请输入邮政编码" pattern="/^[1-9]\d{5}$/" data-error="请输入合法的邮政编码" type="text">
				</label>
			</div>
			<div class="item">
				<label>
					<span class="title">默认地址：</span>
					<div class="address"></div>
					<input type="checkbox">
				</label>
			</div>
			<div class="footer">
				<div class="save-button">添加</div>
			</div>
		</form>
	</div>
	<script>
		// 获取元素
		let oProvince = document.querySelector('select[name="province_id"]')
		let oCity = document.querySelector('select[name="city_id"]')
		let oCounty = document.querySelector('select[name="county_id"]')
		let oTown = document.querySelector('select[name="town_id"]')

		// 获取省份
		axios.get('/pcct/province')
			.then((res) => {
				console.log(res)
				if (res.status) {
					let html = ''
					res.data.forEach(item => {
						html += `<option value="${item.province_id}">${item.name}</option>`
					})
					oProvince.innerHTML = html
				}
			})
		// 监听省，获取市
		oProvince.addEventListener('change', function() {
			oCounty.value = null
			oTown.value = null
			// 获取选中的省份id
			let pid = this.value
			// console.log(pid)
			// 获取市
			axios.get('/pcct/city', {
				params: {
					id: pid
				}
			}).then((res) => {
				if (res.status) {
					let html = ''
					res.data.forEach(item => {
						html += `<option value="${item.city_id}">${item.name}</option>`
					})
					oCity.innerHTML = html
				}
			})
		})
		// 监听市，获取区
		oCity.addEventListener('change', function() {
			oTown.value = null
			// 获取选中的城市id
			let cid = this.value
			// console.log(cid)
			// 获取区
			axios.get('/pcct/county', {
				params: {
					id: cid
				}
			}).then((res) => {
				if (res.status) {
					let html = ''
					res.data.forEach(item => {
						html += `<option value="${item.county_id}">${item.name}</option>`
					})
					oCounty.innerHTML = html
				}
			})
		})
		// 监听区，获取街道
		oCounty.addEventListener('change', function() {
			// 获取选中的区id
			let coid = this.value
			// console.log(coid)
			// 获取街道
			axios.get('/pcct/town', {
				params: {
					id: coid
				}
			}).then((res) => {
				if (res.status) {
					let html = ''
					res.data.forEach(item => {
						html += `<option value="${item.town_id}">${item.name}</option>`
					})
					oTown.innerHTML = html
				}
			})
		})
		// 添加地址
		let oAddButton =document.querySelector('.save-button')
		oAddButton.addEventListener('click',function(){

		})
	</script>
</body>

</html>